<template>
  <BackgroundLayout>
    <template #bgBlock>
      <MyAmap ref="map"/>
    </template>
    <template #topBlock1>
      <TimeWeather />
    </template>
    <template #topBlock2>
      <TopRightBlock @changeStyle="changeStyle"/>
    </template>
    <template #leftBlock1>
      <NuclearMiningCount />
    </template>
    <template #top-left-card-1>
      <PopulationStatistics />
    </template>
    <template #top-left-card-2>
      <PopulationMobility/>
    </template>
    <template #top-mid-card-1>
      <TodayCount/>
    </template>
    <template #top-mid-card-2>
      <HistoryCount/>
    </template>
    <template #top-mid-card-3>
      <CamersCount/>
    </template>
    <template #top-right-card-1>
      <WarningCenter/>
    </template>
    <template #top-right-card-2>
      <!-- <ActiveStatistics/> -->
      <PopulationDistributionChart/>
      
    </template>
    <template #bottom-left-card>
      <KeyPersonnel/>
    </template>
    <template #bottom-right-card>
      <RealWarning/>
    </template>
    <!-- <template #leftBlock2>
      <KeyPersonnelManage />
    </template>
    <template #middleBlock1> -->
      <!-- <MiddleView /> -->
    <!-- </template>
    <template #rightBlock1>
      <PopulationDistributionChart />
    </template>
    <template #rightBlock2>
      <SnapFrame ref="snapFrame" :data-obj="sanpDataObj" :video-photo-data="VideoPhotoData" />
    </template> -->
  </BackgroundLayout>
</template>

<script>
import BackgroundLayout from "@/views/panoramicData/components/BackgroundLayout"
import TimeWeather from "@/views/panoramicData/components/TimeWeather"
import TopRightBlock from "@/views/panoramicData/components/TopRightBlock"
import NuclearMiningCount from "@/views/panoramicData/components/NuclearMiningCount"
// import MiddleView from "@/views/panoramicData/components/MiddleView"
import { getSearchList } from "@/api/common/other"
import { diffTime } from "@/common/config/index.js"
import MyAmap from "./components/MyAmap"

import PopulationDistributionChart from "@/views/panoramicData/components/PopulationDistributionChart"
import ActiveStatistics from "@/views/panoramicData/components/ActiveStatistics"
import CamersCount from "@/views/panoramicData/components/CamersCount"
import KeyPersonnel from "@/views/panoramicData/components/KeyPersonnel"
import PopulationMobility from "@/views/panoramicData/components/PopulationMobility"
import PopulationStatistics from "@/views/panoramicData/components/PopulationStatistics"
import RealWarning from "@/views/panoramicData/components/RealWarning"
import TodayCount from "@/views/panoramicData/components/TodayCount"
import WarningCenter from "@/views/panoramicData/components/WarningCenter"
import HistoryCount from "@/views/panoramicData/components/HistoryCount"


export default {
  name: "CustomM",
  props: {},
  components: {
    BackgroundLayout,
    TimeWeather,
    TopRightBlock,
    NuclearMiningCount,
    // MiddleView,
    MyAmap,
    
    PopulationDistributionChart,
    ActiveStatistics,
    CamersCount,
    KeyPersonnel,
    PopulationMobility,
    PopulationStatistics,
    RealWarning,
    TodayCount,
    WarningCenter,
    HistoryCount,
  },
  data() {
    return {
      // 人脸抓拍数据
      sanpDataObj: {
        faceTotal: 0,
        faceTime: "",
        faceLocation: "",
        faceSrc: "", //  require("@/assets/img/sanpImage2.png"),
        carTotal: 0,
        carTime: 0,
        carLocation: "",
        carSrc: "" //  require("@/assets/img/sanpImage1.png")
      },
      commonHttp: "/httpImage/",
      VideoPhotoData: {}
    }
  },
  watch: {},
  created() {
    if (!localStorage.style) {
      localStorage.style = 'light'
    }
    this.getSearchList()
  },
  methods: {
    changeStyle() {
      this.$refs.map.changeStyle()
    },
    getSearchList() {
      let params = {
        page: 1,
        size: 60,
        searchTime: [
          this.$moment(new Date()).subtract(1, "months").format("YYYY-MM-DD HH:mm:ss"),
          this.$moment().format("YYYY-MM-DD HH:mm:ss")
        ],
        alarmlevel: [],
        inputValue: "",
        tabs: [],
        tasks: [],
        treeNodes: [],
        dataSource: "camera",
        collection: ""
      }
      getSearchList(params).then((res) => {
        if (res && res.success) {
          console.log(res.data)
          if (res.data.total > 0) {
            // this.rightBlock2(res.data)
          }
        }
      })
    },
    // 抓拍数据
    rightBlock2(sanpData) {
      this.VideoPhotoData = sanpData
      let sanpObj = sanpData?.datalist[0].activeObject
      let carObj = sanpData?.datalist[1].activeObject
      this.sanpDataObj = {
        faceTotal: sanpData.total,
        faceTime: diffTime(sanpObj.likeDate),
        faceLocation: sanpObj.cameraAddr,
        faceSrc: sanpObj.picMaxUrl[0].length === 0 ? "" : this.commonHttp + sanpObj.baseInfo[0].targetPicUrl,
        carTotal: 254,
        carTime: diffTime(carObj.likeDate),
        carLocation: carObj.cameraAddr,
        carSrc: carObj.picMaxUrl[0].length === 0 ? "" : this.commonHttp + carObj.baseInfo[0].targetPicUrl
      }
      // this.$refs.snapFrame.editConfig.infomation = sanpData?.datalist
      // this.$refs.snapFrame.editConfig.currentId = sanpObj.id
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped></style>
